<template>
	<el-dialog v-model="showModal" class="peak-dialog" :close-on-click-modal="false" :title="title" :width="900">
		<el-form ref="paramsFormRef" class="params-form" :inline="true" label-position="right" label-width="100px" :model="paramsForm" :rules="paramsRules">
			<el-row :gutter="16" justify="start">
				<el-col :span="12">
					<el-form-item class="form-item" label="报告名称:" prop="reportName">
						<el-input v-model="paramsForm.reportName" placeholder="请输入报告名称" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item class="form-item" label="报告时间:" prop="reportTime">
						<el-date-picker v-model="paramsForm.reportTime" placeholder="请选择报告时间" type="date" value-format="YYYY-MM-DD" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item class="form-item" label="报告类型:" prop="reportType">
						<dict-select v-model="paramsForm.reportType" :dictKey="'report_type'" placeholder="请选择报告类型" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item class="form-item" label="报告状态:" prop="reportStatus">
						<el-radio-group v-model="paramsForm.reportStatus">
							<el-radio :value="'0'">正常</el-radio>
							<el-radio :value="'1'">停用</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item class="form-item" label="报告文件:" prop="fileInfos">
						<UploadFile :params="{ bucketName: 'report' }" :limit="1" @success="handleSuccess" @remove="handleRemove" :list="viewFileList" class="mt0 w100" />
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item class="form-item" label="备注信息:" prop="remark">
						<el-input v-model="paramsForm.remark" rows="3" type="textarea" />
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="handleCancel">取 消</el-button>
				<el-button type="primary" @click="handleSure" v-throttle>确 定</el-button>
			</span>
		</template>
	</el-dialog>
</template>
<script setup>
import global from '@/utils/global'
import UploadFile from '@/components/UploadFile.vue'
const emit = defineEmits(['peak-modal-ok'])
/*
 *@Description: 初始化数据
 *@Author: liuYuFeng
 *@Date: 2023-02-24 16:33:25
 */
const viewFileList = ref([])
const state = reactive({
	showModal: false,
	paramsFormRef: null,
	title: '',
	paramsForm: {
		fileId: '',
		reportName: '',
		reportTime: '',
		reportType: '',
		reportStatus: '0',
		remark: '',
		fileInfos: [],
	},
	paramsRules: {
		reportName: [{ required: true, message: '请输入报告名称', trigger: 'blur' }],
		reportTime: [{ required: true, message: '请选择报告时间', trigger: 'change' }],
		reportType: [{ required: true, message: '请选择报告类型', trigger: 'change' }],
		fileInfos: [{ required: true, message: '请上传报告文件', trigger: 'change' }],
	},
})
const { showModal, title, paramsForm, paramsRules, paramsFormRef } = toRefs(state)

/*
 *@Description: 方法method
 *@Author: liuYuFeng
 *@Date: 2023-02-24 15:34:16
 */
const handleSure = () => {
	state.paramsFormRef.validate(valid => {
		if (valid) {
			handleSureOk()
		} else {
			return false
		}
	})
}
const handleSureOk = () => {
	state.paramsForm.fileId = state.paramsForm.fileInfos[0].fileId
	state.paramsForm.fileName = state.paramsForm.fileInfos[0].fileName
	if (state.paramsForm.id) {
		//编辑
		global.$fetchPostData(`/meta-system/web/v1/sysReport/editReport`, state.paramsForm).then(data => {
			if (data.code == 200) {
				state.showModal = false
				emit('peak-modal-ok', 2)
			} else {
				global.$baseMessage(data.msg, 'error')
			}
		})
	} else {
		global.$fetchPostData(`/meta-system/web/v1/sysReport/addReport`, state.paramsForm).then(data => {
			if (data.code == 200) {
				state.showModal = false
				emit('peak-modal-ok', 1)
			} else {
				global.$baseMessage(data.msg, 'error')
			}
		})
	}
}
const handleCancel = () => {
	state.showModal = false
}
const handleShowModal = async row => {
	state.showModal = true
	await nextTick()
	state.paramsForm.id = ''
	if (row) {
		state.title = '编辑报告'
		state.paramsFormRef.resetFields()
		getDataDetail(row.id)
	} else {
		state.title = '新增报告'
		state.paramsFormRef.resetFields()
	}
}
const handleSuccess = res => {
	state.paramsForm.fileInfos.push({
		fileId: res.fileId,
		fileName: res.fileName,
	})
}
const handleRemove = (file, list) => {
	state.paramsForm.fileInfos = getUploadList(list)
}
const getUploadList = list => {
	return list.map(item => {
		if (item.response) {
			const res = item.response.data
			return {
				fileId: res.fileId,
				fileName: res.fileName,
			}
		} else {
			return {
				fileId: item.url,
				fileName: item.name,
			}
		}
	})
}
const getDataDetail = id => {
	global.$fetchPostData(`/meta-system/web/v1/sysReport/details`, { idStr: id }).then(data => {
		if (data.code == 200) {
			state.paramsForm = data.data || {}
			state.paramsForm.fileInfos = data.data.fileId
				? [
						{
							fileId: data.data.fileId,
							fileName: data.data.fileName,
						},
				  ]
				: []
			viewFileList.value = data.data.fileId
				? [
						{
							url: data.data.fileId,
							name: data.data.fileName,
						},
				  ]
				: []
		} else {
			global.$baseMessage(data.msg, 'error')
		}
	})
}
defineExpose({
	handleShowModal,
})
</script>
<style lang="scss" scoped></style>
